<template>
  <div class="box">
    <heads></heads>
    <tools></tools>

    <div class="tou">
      <!-- <img class="img" :src="backgroundImage" /> -->
      <div class="tit">
        <!-- <div class="ceng"></div> -->
        <div class="tit1">
          <div class="list">
            <div
              class="li"
              style="cursor: pointer"
              @click="
                () => {
                  $router.push('/');
                }
              "
            >
              <img src="../../assets/logo.png" />
            </div>
            <!-- recruitmentType -->
            <div
              @click="toJump('inviteTime', 'full')"
              :style="tHouseInfo.recruitmentType == 1 ? 'color:#64b6a8' : ''"
            >
              全职招聘
            </div>
            <div
              @click="toJump('inviteTime', 'part')"
              :style="tHouseInfo.recruitmentType == 2 ? 'color:#64b6a8' : ''"
            >
              兼职招聘
            </div>
            <div class="sousuo">
              <input
                type="text"
                v-model="searchtext"
                @keyup.enter="search"
                placeholder="请输入关键字搜索"
              />
              <p class="el-icon-search" @click="search()"></p>
            </div>
            <downloadAppBtn></downloadAppBtn>
          </div>
        </div>
      </div>
    </div>
    <div class="wrapper">
      <template v-if="doorSeen">
        <bbczDoorSeen
          :createdId="tHouseInfo.userInformationDto && tHouseInfo.userInformationDto.id"
          @close="doorSeen = false"
          :businessType="3"
          :uid="$route.query.id"
          :vt="1"
          style="margin-bottom: -12px"
          @updataLook="updataLook"
        ></bbczDoorSeen>
      </template>
    </div>

    <div class="moban">
      <div class="moban-left">
        <info-number :infoId="tHouseInfo.id" />
        <div class="moban-flex">
          <div class="moban-title" style="margin-top: 6px; height: auto">
            <!-- 【周末双休】大数据开发工程师 -->
            <span class="" style="word-break: break-all">{{
              tHouseInfo.title
            }}</span>
          </div>
        </div>
        <div class="moban-flex" style="justify-content: flex-start">
          <div class="moban-salary" v-if="tHouseInfo.recruitmentType == 1">
            {{
              tHouseInfo.salaryRange == "面议"
                ? "面议"
                : tHouseInfo.salaryRange + "元"
            }}
          </div>
          <div class="moban-salary" v-if="tHouseInfo.recruitmentType == 2">
            {{ tHouseInfo.salaryRange.split(",").join("") }} &nbsp;&nbsp;{{
              tHouseInfo.settlementMethod
            }}
          </div>
        </div>
        <div class="maban-other">
          <span>
            <!-- 凤台 -->
            {{ tHouseInfo.region }}
          </span>
          <span>
            <!-- 软件工程师 -->
            {{ tHouseInfo.positionCategory }}
          </span>
        </div>
        <div class="maban-other" style="margin-top: 6px; height: auto">
          <template
            v-if="
              tHouseInfo.recruitmentType == 1 ||
              (tHouseInfo.recruitmentType == 2 && tHouseInfo.yearsService)
            "
          >
            <img src="@/assets/v3/Group 77@2x.png" alt="" />
            <span v-if="tHouseInfo.recruitmentType == 1"
              >{{ tHouseInfo.yearsService || "经验不限" }}
            </span>
            <span v-if="tHouseInfo.recruitmentType == 2">{{
              tHouseInfo.yearsService
            }}</span>
          </template>

          <template
            v-if="
              tHouseInfo.recruitmentType == 1 ||
              (tHouseInfo.recruitmentType == 2 &&
                tHouseInfo.educationalRequirements)
            "
          >
            <img src="@/assets/v3/Group 78@2x.png" alt="" />
            <span>{{ tHouseInfo.educationalRequirements || "学历不限" }}</span>
          </template>
        </div>
        <div class="moban-title" v-if="tHouseInfo.fringeBenefits">职位福利</div>
        <div class="moban-tag-list" v-if="tHouseInfo.fringeBenefits">
          <div
            class="moban-tag"
            v-for="item2 in tHouseInfo.fringeBenefits.split(',')"
            :key="item2"
          >
            {{ item2 }}
          </div>
        </div>
        <!-- 全职 -->
        <template v-if="tHouseInfo.recruitmentType == 1">
          <div class="moban-title">职位描述</div>
          <div class="moban-desc" v-html="tHouseInfo.jobDescription"></div>
          <div
            class="moban-title"
            @click="companyDetails"
            v-if="
              tHouseInfo.userInformationDto.enterpriseRecruitmentStatus == 1
            "
          >
            <span>公司简介</span>

            <span class="pointer"
              >查看详情<i class="el-icon-arrow-right"></i
            ></span>
          </div>
          <div class="moban-company">
            <!-- 青岛一家有限公司 -->
            {{ tHouseInfo.enterpriseName }}
          </div>
          <div class="moban-desc">
            {{ tHouseInfo.companyProfile }}
            <!-- 用在树上的生活方式体现个体的超越性，保持婞直却又不拘泥于所谓“遗世独立”的单向度形象。这便是卡尔维诺为我们提供的理想期望范式。生活在树上——始终热爱大地——升上天空。便是卡尔维诺为我们提供的理想期望范式。生活在树上啊... -->
          </div>
          <div class="moban-img-list" v-if="tHouseInfo.introductionPicture">
            <img
              class="moban-img"
              v-for="(i, j) in tHouseInfo.introductionPicture.split('|')"
              @click="HJViewImage(i)"
              :key="j"
              :src="i"
            />
          </div>
        </template>
        <!-- 兼职 -->
        <template v-if="tHouseInfo.recruitmentType == 2">
          <div class="moban-title">岗位要求</div>

          <div class="moban-row">
            <div class="moban-col">
              性别要求：{{
                tHouseInfo.genderRequirements == 1
                  ? "男"
                  : tHouseInfo.genderRequirements == 2
                  ? "女"
                  : "不限"
              }}
            </div>
            <div class="moban-col" v-if="tHouseInfo.workingHours">
              工作时段：{{
                tHouseInfo.workingHours == "不限"
                  ? "不限"
                  : tHouseInfo.workingHours.split(",").join("-")
              }}
            </div>
          </div>
          <div class="moban-row" v-if="tHouseInfo.employmentDate">
            工作日期：{{
              tHouseInfo.employmentDate == "不限"
                ? "不限"
                : tHouseInfo.employmentDate.split(",")[0].split("-")[1] +
                  "月" +
                  tHouseInfo.employmentDate.split(",")[0].split("-")[2] +
                  "日" +
                  "-" +
                  tHouseInfo.employmentDate.split(",")[1].split("-")[1] +
                  "月" +
                  tHouseInfo.employmentDate.split(",")[1].split("-")[2] +
                  "日"
            }}
            <!-- XX年XX月XX日—XX年XX月XX日 -->
          </div>
          <div class="moban-row">
            <div class="moban-col">工作周期：{{ tHouseInfo.workCycle }}</div>
            <div class="moban-col" v-if="tHouseInfo.recruitersNumber">
              招聘人数：{{ tHouseInfo.recruitersNumber }}人
            </div>
          </div>
          <div class="moban-title">职位描述</div>
          <div class="moban-desc" v-html="tHouseInfo.jobDescription">
            <!-- 用在树上的生活方式体现个体的超越性，保持婞直却又不拘泥于所谓“遗世独立”的单向度形象。这便是卡尔维诺为我们提供的理想期望范式。生活在树上——始终热爱大地——升上天空。 -->
          </div>
          <div
            class="moban-title"
            @click="companyDetails"
            v-if="
              tHouseInfo.userInformationDto.enterpriseRecruitmentStatus == 1
            "
          >
            <span>公司简介</span>

            <span class="pointer"
              >查看详情<i class="el-icon-arrow-right"></i
            ></span>
          </div>
        </template>
      </div>
      <div class="moban-right">
        <div class="operate-list">
          <div
            class="operate-item"
            v-for="(item, index) in operateList"
            @click="operateCallback(item)"
            :key="index"
            v-show="!item.hide"
          >
            <template v-if="index == 0">
              <img
                :src="
                  tHouseInfo.whetherCollection == 1
                    ? 'https://pic.bangbangtongcheng.com/static/ysc.png'
                    : item.imgUrl
                "
                alt=""
              />
              <span>{{ item.text }}</span>
            </template>
            <template v-else>
              <img :src="item.imgUrl" alt="" />
              <span>{{ item.text }}</span>
            </template>
          </div>
        </div>
        <div class="moban-user weigui-wrap">
          <div class="weigui" v-if="weig" @click="weigui">
            <img class="img" src="@/assets/v3/new-weigui.png" />
            <p>该用户有{{ Count }}条违规信息！</p>
            <div>查看详情</div>
          </div>
          <div class="moban-user-right-top">
            <div
              class="moban-user-more"
              @click.stop="userfy(tHouseInfo.userInformationDto)"
            >
              查看TA的招聘
            </div>
            <div class="moban-user-info">
              <div class="moban-user-info-left">
                <img
                  :src="
                    (tHouseInfo.userInformationDto &&
                      tHouseInfo.userInformationDto.image) ||
                    defaultAvatar
                  "
                  alt=""
                  class="moban-user-info-img"
                />
                <div class="moban-user-info-text">
                  <!-- 企业 -->
                  {{
                    tHouseInfo.userInformationDto
                      ? tHouseInfo.userInformationDto.isShop == 1
                        ? "商家"
                        : tHouseInfo.userInformationDto.isAgent == 1
                        ? "经纪人"
                        : tHouseInfo.userInformationDto
                            .enterpriseRecruitmentStatus == 1
                        ? "公司"
                        : "个人"
                      : "个人"
                  }}
                </div>
              </div>
              <div class="moban-user-info-right">
                <div
                  class="user-info-right-top"
                  @click.stop="agentDetailNew(tHouseInfo)"
                >
                  <!-- 张毅  -->
                  <span class="line1">
                    {{
                      (tHouseInfo.userInformationDto &&
                        tHouseInfo.userInformationDto.nikeName) ||
                      "未命名用户"
                    }}
                  </span>

                  <span
                    v-if="tHouseInfo.userInformationDto"
                    :style="{
                      color:
                        $colors[
                          (tHouseInfo.userInformationDto.memberLevel || 1) - 1
                        ].wordColor,
                      backgroundColor:
                        $colors[
                          (tHouseInfo.userInformationDto.memberLevel || 1) - 1
                        ].bgColor,
                      borderColor:
                        $colors[
                          (tHouseInfo.userInformationDto.memberLevel || 1) - 1
                        ].lineColor,
                    }"
                  >
                    {{
                      $colors[tHouseInfo.userInformationDto.memberLevel - 1]
                        .level
                    }}
                    <!--青铜会员  -->
                  </span>
                </div>
                <div
                  class="user-info-right-bottom line2"
                  @click="companyDetails"
                >
                  <!-- 青岛一家有限公司公司名公司公司公司名公司... -->
                  {{ tHouseInfo.enterpriseName }}
                </div>
              </div>
            </div>
            <div class="moban-user-operation">
              <div
                @click="deliver()"
                class="moban-user-resume-btn"
                v-if="
                  tHouseInfo.userInformationDto &&
                  user.id != tHouseInfo.userInformationDto.id
                "
              >
                投递简历
              </div>
              <div class="moban-user-chat-online" @click.stop="chat">
                <img src="@/assets/v3/invitedetail1.png" alt="" />
                在线聊天
              </div>

              <div class="moban-user-call" @click="callPhone">
                <img src="@/assets/v3/invitedetail2.png" alt="" />
                {{
                  isShowPhone
                    ? tHouseInfo.userInformationDto &&
                      tHouseInfo.userInformationDto.phone
                    : "拨打电话"
                }}
              </div>
            </div>
          </div>
        </div>
        <div class="miniprogram">
          <!-- class="saoma_img"
					<img src="@/assets/v3/reward.png" alt="" />
					 -->
          <img
            :src="qrCode"
            @error.once="reGetQrCode()"
            alt="重新获取"
            v-if="qrCode"
            @click.stop="reGetQrCode()"
          />

          <div>扫码查看小程序内信息</div>
        </div>
      </div>
    </div>
    <div class="invite-title wrapper">工作地点</div>
    <div id="containepic-wrap" class="wrapper" style="position: relative">
      <div
        id="containepic"
        class="wrapper"
        style="width: 1200px; height: 400px"
      ></div>
      <!-- <div
        id="custom-control"
        @click="resetPosition"
        style="
          border-radius: 8px;
          position: absolute;
          bottom: 20px;
          right: 20px;
          background-color: #fff;
          padding: 4px;
          cursor: pointer;
          color: #333;
        "
      >
        <img
          src="@/assets/v3/areacenter.png"
          alt=""
          style="height: auto; width: 32px"
        />
      </div> -->
    </div>
    <div class="wrapper">
      <p class="mzsm">
        {{ disclaimerContent }}
        <!-- 免责声明:帮帮同城旨在为广大用户提供更丰富的信息，所有职位信息、简历信息及活动信息均由用户自行上传、发布。本平台对用户的真实资信状况、用户发布信息的真实性、合法性、准确性等不作保证。帮帮同城不对因上述原因导致的对其他用户或第三方造成的损失承担任何明示或默示的担保责任或任何责任。 -->
      </p>
    </div>

    <floor></floor>
    <chat ref="chats"></chat>
    <login ref="login" @succer="loginsucces"></login>
    <masks ref="mask" :data="tHouseInfo"></masks>
    <inform
      ref="inform"
      :bUserId="bUserId"
      :businessType="businessType"
      :noBT="true"
    ></inform>
    <zcreport
      ref="zcreport"
      :bUserId="tHouseInfo.userInformationDto.id"
      v-if="tHouseInfo.userInformationDto"
    ></zcreport>
  </div>
</template>

<script>
// import "swiper/swiper-bundle.css";
import floor from "../../components/floor";
import tools from "../../components/tools";
import login from "../../components/login.vue";
import uploadvideo from "../../components/uploadVideo.vue";
import chat from "../../components/chat";
import mainHead from "../../components/head.vue";
import heads from "../../components/head";

import { mapState } from "vuex";
import bbczDoorSeen from "../index/comp/bbcz-door-seen.vue";
import inform from "@/views/index/inform";
import zcreport from "../../components/bbzc/zcreport.vue";

import masks from "./comp/mask.vue";
export default {
  name: "index",
  components: {
    floor,
    login,
    uploadvideo,
    chat,
    tools,
    mainHead,
    heads,
    bbczDoorSeen,
    masks,
    inform,
    zcreport,
  },
  data() {
    return {
      showMask: false,
      doorSeen: false,
      loginstate: false,
      msg: "",
      text: "向右滑",
      accuracy: 1, // 精确度小，可允许的误差范围小；为1时，则表示滑块要与凹槽完全重叠，才能验证成功。默认值为5
      searchtext: "",
      // ce: false,
      zbc: false,
      con: false,
      con1: false,
      con2: false,
      zhanghao: false,
      userInfo: "",
      // 登录，注册变量
      zhuce_xy: "",
      phone: "",
      password: "",
      phoneCode: "",
      wxOpenid: "",
      image: "",
      nikeName: "",
      zfbOpenid: "",
      pdOpenid: "",
      setIntervalNum: "",
      yzm: "获取验证码",
      shijian: 60,
      show: false,
      text: "",
      //房源信息参数
      HousesPage: {
        pageNo: 1,
        pageSize: 10,
        upStatus: 1,
        isShow: 1,
        examineStatus: 2,
        isLz: "0",
        orderSort: "1",
      },
      Housestotal: 0,
      HousesList: [],

      //看点信息
      WatchList: [],
      //轮播图
      loading: true,
      currentIndex: 3, //当前中间imgs数组中index
      centerInfo: "", // 当前中间信息
      startX: "",
      endX: "",
      imgs: [],
      previous: 0,

      user: {},
      loc: {},
      bannerList: [],
      confirm: false,
      t1: "",
      swiper: true,
      backgroundImage: "",
      jiaruXuan: "",
      jiaruXuan1: "",
      isshow: false,
      location: "",
      operateList: [
        {
          imgUrl: require("@/assets/shou2.png"),
          text: "收藏信息",
          cab: "collect",
          is: false,
          hide: false
        },

        {
          imgUrl: require("@/assets/v3/resume3.png"),
          text: "举报",
          cab: "report",
          is: true,
          hide: false
        },
        {
          imgUrl: require("@/assets/bbcz/xqsmkg01.png"),
          text: "上门看看",
          cab: "doorSeenClick",
          is: false,
          hide: false
        },
        {
          imgUrl: require("@/assets/v3/resume4.png"),
          text: "屏蔽",
          cab: "showMask",
          is: true,
          hide: false
        },
      ],
      tHouseInfo: {},
      qrCode: "",
      Count: 0,
      isShowPhone: false,
      weig: false,
      bUserId: "",
      businessType: "",
    };
  },
  filters: {
    hidePhone(phone) {
      return phone.substring(0, 3) + "***" + phone.substring(phone.length - 2);
    },
  },

  beforeDestroy() {
    clearInterval(this.t1);
  },
  computed: {
    ...mapState({
      msgCount: (state) => state.msgCount,
    }),
    price(price) {
      return (price / 10000).toFixed(2);
    },
    UnitPrice(price, area) {
      return (price / area).toFixed(2);
    },
  },
  created() {
    // this.initMap();
    this.init();
    this.getData();
    this.getDisclaimers(16); //隐私
  },
  mounted() {
    this.doorSeenLsjl();
    setTimeout(() => {
      // console.log("this.$refs.mask", this.$refs.mask.open);
      // this.$refs.mask.open("invite3");
    }, 200);
  },
  methods: {
    // 获取上门看过历史记录
    doorSeenLsjl() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      this.$getHttp("/api/mobile/personnelOwner/queryVisitedHistory", {
        userId: user.id,
        relatedBusiness: this.$route.query.id,
        visitType: 1,
      }).then(res => {
        if (res.visitedHistory.id) {
          // 判断是上门看看还是看过
          // this.smkg_chage = true
          this.operateList.forEach(v=>{
            if (v.cab === 'doorSeenClick') {
              v.text = '上门看过';
            }
          })
        }
      });
    },
    chat() {
      this.chatzc(
        this.tHouseInfo.userInformationDto.id,
        this.tHouseInfo.id,
        4,
        1
      );
    },

    // 投递简历
    deliver() {
      if (!this.checkLogin()) {
        return;
      }
      if (this.user.enterpriseRecruitmentStatus == 1) {
        this.myErrorMessage("您是公司身份，无法投递简历！");
        return;
      }
      // 判断是否有简历
      this.$getHttp("/api/mobile/personnelOwner/getResumeDetails", {
        publisherId: this.user.id,
      }).then((res) => {
        if (res.biographicalNotesDetails) {
          // 有简历
          // uni.navigateTo({
          //   url:
          //     "/pages_recruitMoney/submitResume/deliver?userId=" +
          //     this.data.userInformationDto.id +
          //     "&index=1&status=1&id=" +
          //     this.data.id
          // });
          this.openUrls("/invite/deliverResume", {
            userId: this.tHouseInfo.userInformationDto.id,
            id: this.tHouseInfo.id,
            status: 1,
            index: 1,
          });
        } else {
          // 没有简历
          this.openUrls("/invite/release", {
            userId: this.tHouseInfo.userInformationDto.id,
            id: this.tHouseInfo.id,
            type: "publishSubmitResume",
          });
        }
      });
    },
    // 点击举报
    jubaoClick() {
      this.$refs.zcreport.jubaoGuan(this.$route.query.id);
    },
    // 点击违规
    weigui() {
      // this.reportInformation();
      // this.centerDialogVisible = true;
      this.bUserId = this.tHouseInfo.userInformationDto.id;
      this.businessType = 4;
      setTimeout(() => {
        this.$refs.inform.getReportMyRecord();
      }, 100);
    },
    callPhone() {
      if (!localStorage.getItem("userInfo")) {
        this.myErrorMessage("请先登录！");
        return;
      }
      // console.log(this.userInfo)
      this.insertCallRecord({
        userId: JSON.parse(localStorage.getItem("userInfo")).id,
        associationId: this.$route.query.id,
        businessType: 4,
        telephoneNumber: this.tHouseInfo.userInformationDto.phone,
        callType: 7,
      });
      this.isShowPhone = !this.isShowPhone;
    },
    // 跳转公司
    companyDetails() {
      console.log(this.tHouseInfo);
      this.openUrlb("inviteCompany", {
        userId: this.tHouseInfo.userInformationDto.id,
      });
    },
    // 预览图片
    HJViewImage(item2) {
      var imgList = this.tHouseInfo.introductionPicture
        .split("|")
        .filter((item) => item);

      var index = imgList.findIndex((item) => item2 == item);

      this.$hevueImgPreview({
        multiple: true, // 开启多图预览模式
        nowImgIndex: index, // 多图预览，默认展示第二张图片
        imgList: imgList, // 需要预览的多图数组
      });
    },
    reGetQrCode() {
      this.$postHttp("/api/mobile/public/generateAppletQRCode", {
        id: this.$route.query.id,
        url: "pages_recruitMoney/recruitmentDetails/concurrently",
      }).then((data) => {
        console.log(data);
        this.qrCode = data.imagePath;
        // console.log(data.imagePath);
      });
    },
    updataLook(){
      this.doorSeenLsjl();
    },
    operateCallback(item) {
      if (!localStorage.getItem("userInfo")) {
        this.myErrorMessage("请先登录！");
      } else {
        if (item.cab == "doorSeenClick") {
          this.doorSeen = !this.doorSeen;
        }
        if (item.cab == "showMask") {
          if (this.user.id == this.tHouseInfo.userInformationDto.id) {
            this.myErrorMessage("不可屏蔽自己发布的信息!");
            return;
          }
          this.$refs.mask.open("invite2");
          // this.showMask = !this.showMask;
        }
        if (item.cab == "collect") {
          if (this.collectLoading) {
            return;
          }
          this.collectLoading = true;
          this.$postHttp(
            "/api/mobile/public/favoriteFollowOrCancelFavoriteFollow",
            {
              collectorId: JSON.parse(localStorage.getItem("userInfo")).id,
              collectionType: "7",
              relationId: this.tHouseInfo.id,
              id:
                this.tHouseInfo.followCollections &&
                this.tHouseInfo.followCollections.id
                  ? this.tHouseInfo.followCollections.id
                  : "",
            }
          )
            .then((data) => {
              if (data.code == 200) {
                this.getHouseInfo(item.id);
                this.$message({
                  message: data.msg,
                  type: "success",
                  offset: 120,
                  duration: 2000,
                });
                if (this.tHouseInfo.whetherCollection == 0) {
                  this.addIntegral(5, "收藏招聘");
                }
              }
            })
            .catch((err) => {
              // console.log()
              this.collectLoading = false;
            });
        }
        if (item.cab == "report") {
          this.jubaoClick();
        }
      }
    },
    toJump(path, type) {
      const routeLink = this.$router.resolve({
        path: `${path}?type=${type}`,
      });
      window.open(routeLink.href, "_blank");
      // this.$router.push("index/" + type);
    },
    resetPosition() {
      var center = new qq.maps.LatLng(
        this.tHouseInfo.latitude,
        this.tHouseInfo.longitude
      );

      this.map.panTo(center);
    },
    // 获取定位
    initMap() {
      setTimeout(async () => {
        var that = this;
        var html = "";
        if (!that.tHouseInfo.latitude) return false;
        var center = new qq.maps.LatLng(
          // that.tHouseInfo.latitude,
          // that.tHouseInfo.longitude
          // 36.779572,
          // 119.974598
          that.tHouseInfo.latitude,
          that.tHouseInfo.longitude
        );

        var map = new qq.maps.Map(document.getElementById("containepic"), {
          center: center,
          zoom: 13,
          disableDefaultUI: true,
        });
        this.map = map;
        var marker = new qq.maps.Marker({
          position: center,
          map: map,
        });
        //that.markersArray.push(marker);
        var infoWin = new qq.maps.InfoWindow({
          map: map,
        });
        html = `<div id="popup" style="font-size:16px; text-align:left;white-space:nowrap;margin:10px;color:#333333;">工作地点：${that.tHouseInfo.workLocation}</div>`;

        infoWin.close(); //先关闭已打开信息窗口
        infoWin.open();
        infoWin.setContent(html);
        infoWin.setPosition(center);

        // 获取标记的点击事件;
        qq.maps.event.addListener(marker, "click", function () {
          infoWin.close(); //先关闭已打开信息窗口

          infoWin.open(); //再打开 并赋给新的值
          infoWin.setContent(html);
          infoWin.setPosition(center);
        });

        let data = {
          key: "ZYIBZ-6VVRW-NCURN-O6GZO-2VRAH-KIBJV",
          output: "jsonp",
        };
        function CustomZoomControl(controlDiv, map) {
          controlDiv.style.margin = "0 20px 20px 0";
          controlDiv.style.backgroundColor = "#FFFFFF";
          controlDiv.style.borderRadius = "8px";
          controlDiv.style.padding = "4px";
          controlDiv.style.backgroundColor = "#FFFFFF";
          controlDiv.style.color = "#333";
          controlDiv.style.cursor = "pointer";

          let img = document.createElement("img");
          img.src = require("@/assets/v3/areacenter.png");
          img.style.height = "auto";
          img.style.width = "32px";
          controlDiv.appendChild(img);
          controlDiv.index = 1; //设置在当前布局中的位置

          function update() {
            map.panTo(center);
            // var currentZoom = map.getZoom();
            // controlDiv.innerHTML = "地图缩放级别：" + currentZoom;
            // qq.maps.event.trigger(controlDiv, "resize");
          }

          update();
          //添加dom监听事件  一旦zoom的缩放级别放生变化则出发update函数
          qq.maps.event.addDomListener(controlDiv, "click", update);
        }

        var customZoomDiv = document.createElement("div");
        //获取控件接口设置控件
        var customZoomControl = new CustomZoomControl(customZoomDiv, map);
        //将控件添加到controls栈变量并将其设置在顶部位置
        map.controls[qq.maps.ControlPosition.BOTTOM_RIGHT].push(customZoomDiv);
        // var control = document.getElementById("#custom-control")
        // // map.getContainer().appendChild(control)
        // // 获取标记的点击事件;
        // qq.maps.event.addListener(control, "click", function () {
        //   map.panTo(center)
        // });

        // var data2 = {};
        // var oLocation = {};
        // await this.$jsonp(
        //   "https://apis.map.qq.com/ws/location/v1/ip",
        //   data
        // ).then((data) => {
        //   this.location = data.result.ad_info.city;
        //   // 获取当前地址
        //   oLocation = {
        //     // 经度
        //     longitude: data.result.location.lng,
        //     // 维度
        //     latitude: data.result.location.lat,
        //   };
        // });
        // data2 = {
        //   mode: "driving",
        //   from: oLocation.latitude + "," + oLocation.longitude,
        //   to: that.tHouseInfo.latitude + "," + that.tHouseInfo.longitude,
        //   key: data.key,
        // };
        // var param = [];
        // var carInfo = {};
        // var bicycleInfo = {};

        // for (const key in data2) {
        //   if (data2.hasOwnProperty.call(data2, key)) {
        //     const element = data2[key];
        //     param.push(key + "=" + element);
        //   }
        // }
        // var url =
        //   `https://apis.map.qq.com/ws/distance/v1/matrix/?` + param.join("&");
        // await this.$jsonp(url + "&mode=driving", { output: "jsonp" }).then(
        //   (data) => {
        //     if (data.message == "query ok") {
        //       carInfo = data.result.rows[0].elements[0];
        //     }
        //   }
        // );
        // await this.$jsonp(url + "&mode=bicycling", { output: "jsonp" }).then(
        //   (data) => {
        //     if (data.message == "query ok") {
        //       bicycleInfo = data.result.rows[0].elements[0];
        //     }
        //   }
        // );
        // if (bicycleInfo.distance && carInfo.distance) {
        //   var bicycleStr1 =
        //     bicycleInfo.distance > 1000
        //       ? bicycleInfo.distance / 1000 + "公里"
        //       : bicycleInfo.distance / 1000 + "米";
        //   var bicycleStr2 = this.ssy(bicycleInfo.duration);
        //   var carStr1 =
        //     carInfo.distance > 1000
        //       ? carInfo.distance / 1000 + "公里"
        //       : carInfo.distance / 1000 + "米";
        //   var carStr2 = this.ssy(carInfo.duration);

        //   carStr1 = carStr1.replace(
        //     /([0-9.]+)/g,
        //     '<span style="color:#6BB9AB;"> $1 </span>'
        //   );
        //   bicycleStr1 = bicycleStr1.replace(
        //     /([0-9.]+)/g,
        //     '<span style="color:#6BB9AB;"> $1 </span>'
        //   );

        //   html = `<div id="popup" style="font-size:16px;text-align:left;white-space:nowrap;margin:10px;color:#333333;">
        //     <div style="margin-bottom:2px">工作地点：${
        //       that.tHouseInfo.workLocation
        //     }</div>
        //     <div><span style="padding-right:12px;">驾车距离：${carStr1}</span>${
        //     carStr2 ? "驾车时间：" + carStr2 : ""
        //   }</div>
        //     <div><span style="padding-right:12px;">骑车距离：${bicycleStr1}</span>  ${
        //     bicycleStr2 ? "骑车时间：" + bicycleStr2 : ""
        //   }</div>

        //     </div>`;

        //   // infoWin.close(); //先关闭已打开信息窗口
        //   // infoWin.open();
        //   infoWin.setContent(html);
        //   // infoWin.setPosition(center);
        // }
      }, 200);
    },
    ssy(e) {
      // if (!e) return "";
      // let hour = parseInt((e / 3600) % 1000000);
      // let me = parseInt(((e - hour * 3600) / 60) % 100000000);
      // let s = parseInt(e - hour * 3600 - me * 60);
      // //三元运算，添零运算
      // hour = hour < 10 ? "0" + hour : hour;
      // me = me < 10 ? "0" + me : me;
      // // s = s < 10 ? "0" + s : s
      // return `${hour}小时${me}分钟`;
    },

    toRouter(i) {
      console.log(this.$refs.mainhead);
      this.$refs.mainhead.setOpen(i);
    },

    Tamp() {
      window.addEventListener(
        "message",
        function (event) {
          if (event.data) {
            this.loc = event.data;
            if (this.loc) {
              console.log(this.loc);
            }
          }
        },
        false
      );
      setTimeout(function () {
        if (!this.loc) {
          console.log("定位超时");
        }
      }, 6000);
    },
    init() {
      this.getUser();
      this.getHouseInfo();
    },
    getUser() {
      let user = JSON.parse(localStorage.getItem("userInfo"));
      if (user != null) {
        this.loginstate = true;
        this.user = user;
        this.$postHttp("/api/mobile/public/increaseBrowsingRecord", {
          browseRecordId: this.$route.query.id,
          viewersId: user.id,
          businessType: 4,
          browsingRecords: 7,
        }).then((res) => {});
      } else {
        this.loginstate = false;
      }
    },

    searchCurrentChange(e) {
      this.searchPage.pageNo = e;
      this.searchList = [];
      this.getSearchInfo();
    },
    //获取房源推荐信息
    getHouseInfo() {
      if (this.$route.query.id) {
        this.$getHttp("/api/mobile/personnelOwner/getRecruitmentById", {
          id: this.$route.query.id,
          userId: localStorage.getItem("userInfo")
            ? JSON.parse(localStorage.getItem("userInfo")).id
            : "",
        }).then((res) => {
          if (!res.recommendedPosition.id) {
            this.backClose();
            setTimeout(() => {
              this.myErrorMessage("该职位已关闭！");
            }, 500);
            return;
          }
          this.operateList.forEach(v=>{
            if (v.is) {
              v.hide = this.user.id == res.recommendedPosition.userInformationDto.id;
            }
          })
          res.recommendedPosition.jobDescription = this.replaceN(
            res.recommendedPosition.jobDescription
          );

          this.collectLoading = false;
          this.tHouseInfo = res.recommendedPosition;
          if (res.recommendedPosition.latitude) {
            this.initMap();
          }

          if (!this.firstPage) {
            this.firstPage = true;
            this.getCount(res.recommendedPosition.userInformationDto.id);
          }
          if (this.qrCode == "") {
            this.$postHttp("/api/mobile/public/generateAppletQRCode", {
              id: this.tHouseInfo.id,
              url: "pages_recruitMoney/recruitmentDetails/concurrently",
            }).then((data) => {
              console.log(data);
              this.qrCode = data.imagePath;
              // console.log(data.imagePath);
            });
          }
          // pages_recruitMoney/recruitmentDetails/concurrently
        });
      }
    },
    // 判断是否有违规
    getCount(id) {
      let that = this;
      this.$getHttp("/mob/user/getReportMyRecord", {
        userId: id,
        businessType: 4,
      }).then((res) => {
        this.Count = res.page.count;
        if (this.Count > 0) {
          that.weig = true;
          setTimeout(() => {
            that.weig = false;
          }, 3000);
        }
      });
    },
    details(item) {
      if (item.transaction_type == 1) {
        this.$router.push({
          path: "/index/leaseDetails",
          query: {
            id: item.id,
          },
        });
      } else {
        this.$router.push({
          path: "/index/newHouseDetails",
          query: {
            id: item.id,
          },
        });
      }
    },
    login() {
      this.$refs.login.login();
    },
    tou_zhuce() {
      this.$refs.login.tou_zhuce();
    },
    loginout() {
      localStorage.removeItem("userInfo");
      localStorage.removeItem("contrastIdList");
      localStorage.removeItem("confirm");
      this.getUser();
    },
    loginsucces(e) {
      if (e) {
        this.getUser();
      }
    },
    search() {
      if (this.searchtext.trim() != "") {
        this.openUrlb("/invite/inviteTime", {
          search: this.searchtext,
        });
      }
      // this.$router.push({
      //   path: "/index/houseSearch",
      //   query: {
      //     search: this.searchtext,
      //   },
      // });
    },
    async getData() {
      this.$nextTick(() => {
        this.loading = false;
      });
    },
    // 计算中间卡片信息
    banner() {
      console.log("跳转");
    },
    toAgent(item) {
      // if(!item.shop_id){
      // 	this.$router.push({
      // 		path: "/index/userDetail",
      // 		query: {
      // 			id: item.user_id
      // 		}
      // 	});
      // 	return
      // }
      this.$router.push({
        path: "/index/goldConsultant",
        query: {
          id: item.user_id,
        },
      });
    },
    shopdetails(item) {
      if (item.shop_name == "个人房源") {
        this.$message({
          message: "个人房源！",
          type: "error",
          offset: 120,
          duration: 2000,
        });
      } else {
        const routeLink = this.$router.resolve({
          path: "/index/ShopDetails?id=" + item.shop_id,
        });
        window.open(routeLink.href, "_blank");
        // this.$router.push({
        //   path: "/index/ShopDetails",
        //   query: {
        //     id: item.shop_id
        //   }
        // });
      }
    },
    toWatching(id) {
      this.$router.push({
        path: "/index/particulars",
        query: {
          id: id,
          type: "watch",
        },
      });
    },
  },
};
</script>
<style lang="less" scoped>
// 违规

.invite-title {
  padding-left: 30px;
  height: 34px;
  font-size: 24px;
  font-weight: 500;
  color: #333333;
  line-height: 34px;
  margin-top: 64px;
  margin-bottom: 6px;
}

.mzsm {
  font-size: 12px;
  color: #aaa;
  margin-top: 10px;
  width: 97%;
  margin-top: 22px;
  margin-bottom: 44px;
}

.divdw {
  position: absolute;
  left: 200px;
  top: 30px;
  height: 40px;
  background-color: rgba(51, 51, 51, 0.46);
  border-radius: 25px;
  border: 1px solid #ffffff;
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;

  .divdw_img {
    width: 28px;
    height: 28px;
    margin-left: 12px;
  }

  .divdw_span {
    font-size: 18px;
    font-weight: 400;
    color: #ffffff;
    margin-right: 10px;
  }
}

.swiperclass {
  margin-top: 10px;
  // box-shadow: rgba(181, 181, 181, 0.3) 0px 10px 16px 0px;
  box-shadow: 0px 0px 10px 8px rgba(181, 181, 181, 0.3);
  // border: 2px solid rgb(214, 210, 210);
}

/deep/ .el-message--danger {
  color: red !important;

  .el-message__content {
    color: red !important;
  }
}

/deep/.el-message--danger {
  color: blue !important;
}

.el-message--danger {
  color: yellow !important;
}

.zbc {
  position: fixed;
  width: 100%;
  top: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 99;

  .con {
    position: absolute;
    width: 470px;
    height: 540px;
    background-color: #fff;
    border-radius: 5px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .el-icon-close {
      position: absolute;
      color: #999999;
      top: 25px;
      right: 30px;
      font-size: 25px;
      cursor: pointer;
    }

    .d1 {
      position: absolute;
      top: 47px;
      left: 60px;
      font-size: 26px;
      font-weight: 600;
      color: #64b6a8;
    }

    .d2 {
      position: absolute;
      top: 58px;
      right: 60px;
      color: #999999;

      span {
        color: #64b6a8;
        border-bottom: 1px solid #64b6a8;
      }
    }

    input {
      width: 350px;
      font-size: 18px;
      line-height: 25px;
      margin-left: 60px;
      margin-bottom: 30px;
      border-bottom: 1px solid #d0d0d0;
      padding-bottom: 10px;
    }

    .input1 {
      margin-top: 140px;
    }

    .input_p {
      position: absolute;
      right: 60px;
      bottom: 43px;
      color: #64b6a8;
      font-size: 18px;
      cursor: pointer;
    }

    .xieyi {
      position: relative;
      width: 348px;
      margin-left: 60px;

      .p {
        width: 348px;
        font-size: 18px;
        color: #666;
        text-indent: 36px;
        line-height: 28px;

        span {
          color: #64b6a8;
        }
      }

      .el-checkbox {
        position: absolute;
      }

      /deep/.el-checkbox__inner {
        width: 28px;
        height: 28px;
        border-radius: 50%;
      }

      /deep/.el-checkbox__inner::after {
        border: 2px solid #fff;
        width: 6px;
        height: 13px;
        left: 9px;
        top: 4px;
        border-left: 0;
        border-top: 0;
      }

      /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
      /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #64b6a8;
        border-color: #64b6a8;
      }
    }

    .queding {
      width: 350px;
      height: 48px;
      line-height: 48px;
      margin-left: 60px;
      text-align: center;
      background-color: #64b6a8;
      border-radius: 24px;
      margin-top: 30px;
      font-size: 21px;
      cursor: pointer;
    }

    .xuan {
      opacity: 0.5;
    }
  }

  .con1 {
    position: absolute;
    width: 470px;
    height: 650px;
    background-color: #fff;
    border-radius: 5px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);

    .el-icon-close {
      position: absolute;
      color: #999999;
      top: 25px;
      right: 30px;
      font-size: 25px;
      cursor: pointer;
    }

    .d1 {
      position: absolute;
      top: 47px;
      left: 60px;
      font-size: 26px;
      font-weight: 600;
      color: #64b6a8;
    }

    input {
      width: 350px;
      font-size: 18px;
      line-height: 25px;
      margin-left: 60px;
      margin-bottom: 30px;
      border-bottom: 1px solid #d0d0d0;
      padding-bottom: 10px;
    }

    .input1 {
      margin-top: 140px;
    }

    .input_p {
      position: absolute;
      right: 60px;
      bottom: 43px;
      color: #64b6a8;
      font-size: 18px;
      cursor: pointer;
    }

    .xieyi {
      position: relative;
      width: 348px;
      margin-left: 60px;

      .p {
        width: 348px;
        font-size: 18px;
        color: #666;
        text-indent: 36px;
        line-height: 28px;

        span {
          color: #64b6a8;
        }
      }

      .el-checkbox {
        position: absolute;
      }

      /deep/.el-checkbox__inner {
        width: 28px;
        height: 28px;
        border-radius: 50%;
      }

      /deep/.el-checkbox__inner::after {
        border: 2px solid #fff;
        width: 6px;
        height: 13px;
        left: 9px;
        top: 4px;
        border-left: 0;
        border-top: 0;
      }

      /deep/.el-checkbox__input.is-checked .el-checkbox__inner,
      /deep/.el-checkbox__input.is-indeterminate .el-checkbox__inner {
        background-color: #64b6a8;
        border-color: #64b6a8;
      }
    }

    .queding {
      width: 350px;
      height: 48px;
      line-height: 48px;
      margin-left: 60px;
      text-align: center;
      background-color: #64b6a8;
      border-radius: 24px;
      margin-top: 30px;
      font-size: 21px;
      cursor: pointer;
    }

    .xuan {
      opacity: 0.5;
    }

    .d {
      display: inline-block;
      font-size: 18px;
      color: #999999;
      margin-top: 16px;
      cursor: pointer;
    }

    .d2 {
      margin-left: 60px;
      margin-right: 165px;
    }

    .qita {
      width: 270px;
      margin-left: 50%;
      transform: translateX(-50%);
      margin-top: 35px;

      span {
        display: inline-block;
        vertical-align: middle;
        margin-right: 22px;
        color: #999;
      }

      span:nth-child(3n) {
        margin-right: 0;
      }

      .s1 {
        width: 58px;
        height: 1px;
        background-color: #999;
      }
    }

    .wx {
      width: 46px;
      margin-left: 50%;
      transform: translateX(-50%);
      margin-top: 35px;
      cursor: pointer;

      img {
        width: 46px;
        height: 46px;
      }

      p {
        font-size: 16px;
        color: #666;
        text-align: center;
        margin-top: 6px;
      }
    }
  }

  .con2 {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 991;

    .verify {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);

      /deep/.slide-verify-slider {
        border: 0;
        margin-top: -5px;
      }
    }
  }

  .motaikuang {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4);
    z-index: 20;

    .verify {
      position: fixed;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
  }
}

.box {
  position: relative;
  width: 100%;
  padding-bottom: 200px;
}

.zhong {
  position: relative;
  width: 1200px;
  margin-left: 50%;
  transform: translateX(-50%);
  color: #000;
  margin-top: 32px;
  padding-bottom: 20px;
  overflow: hidden;

  .kandian {
    position: absolute;
    right: 0;
    display: inline-block;
    width: 330px;
    height: 220px;
    box-sizing: border-box;
    border: 1px solid #64b6a8;

    img {
      width: 330px;
      height: 52px;
      margin-top: -7px;
      margin-left: -1px;
    }

    .list {
      margin-top: 8px;
      margin-left: 20px;
      color: #000;
      height: 117px;
      overflow: hidden;

      .li {
        width: 287px;
        padding: 16px 0;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        font-size: 20px;
        border-bottom: 1px solid #e0e0e0;
      }
    }

    .gengduo {
      position: absolute;
      bottom: 16px;
      right: 20px;
      color: #64b6a8;

      img {
        width: 16px;
        height: 16px;
        margin-top: -4px;
      }
    }
  }

  .swiper {
    width: 800px;
    height: 240px;
    display: inline-block;

    img {
      width: 360px;
      height: 240px;
    }
  }
}

.tou {
  position: relative;
  width: 100%;

  // height: 300px;
  .tit {
    width: 100%;
    height: 100%;

    .ceng {
      position: absolute;
      width: 100%;
      height: 100%;
      // background: linear-gradient(
      //   178deg,
      //   #333333 0%,
      //   rgba(83, 83, 83, 0.53) 48%,
      //   #333333 100%
      // );
      // opacity: 0.74;
    }

    .tit_1 {
      width: 1200px;
      height: 100%;
      margin-left: 50%;
      transform: translateX(-50%);

      .div1 {
        position: absolute;
        left: 0;
        top: 30px;
        /* width: 60px;
        height: 60px;
        border-radius: 50%; */
        cursor: pointer;
      }

      .div2 {
        position: absolute;
        left: 74px;
        top: 40px;
        font-size: 28px;

        color: #fff;
        cursor: pointer;
      }

      .div3 {
        position: absolute;
        left: 217px;
        top: 40px;
        width: 91px;
        height: 40px;
        background: rgba(51, 51, 51, 0.46);
        border: 1px solid #ffffff;
        border-radius: 25px;
        text-indent: 40px;
        line-height: 40px;
        font-size: 20px;
        z-index: 9;
        cursor: pointer;

        img {
          position: absolute;
          left: 12px;
          top: 5px;
          width: 28px;
          height: 28px;
        }
      }

      .div4 {
        cursor: pointer;
        position: absolute;
        font-size: 18px;
        top: 48px;
        right: 0;
        display: flex;

        div {
          // vertical-align: middle;
        }

        img {
          cursor: pointer;
          width: 26px;
          height: 26px;
          margin-right: 10px;
        }

        //cursor: pointer;
      }

      .div5 {
        //position: absolute;
        width: 26px;
        height: 26px;
        //top: 47px;
        //left: 1080px;
        cursor: pointer;
        border-radius: 26px;
      }

      .div6 {
        position: absolute;
        top: 170px;
        left: 250px;
        font-size: 20px;

        span {
          margin-right: 40px;
          cursor: pointer;
          color: #333333;
        }
      }

      .div7 {
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        bottom: 35px;
        width: 700px;
        height: 55px;
        background: #ffffff;
        border-radius: 4px;
        font-size: 18px;
        overflow: hidden;
        border: 1px solid #64b6a8;

        input {
          width: 480px;
          height: 55px;
          line-height: 55px;
          text-indent: 16px;
          font-size: 18px;
        }

        img {
          width: 25px;
          height: 25px;
          margin-left: 20px;
          cursor: pointer;
        }

        p {
          position: absolute;
          top: 0;
          right: 0;
          width: 80px;
          height: 55px;
          background-color: #64b6a8;
          text-align: center;
          line-height: 55px;
          font-size: 24px;
          cursor: pointer;
        }
      }
    }
  }

  .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
  }
}

/* .cebian {
  position: fixed;
  right: 0;
  width: 100px;
  height: 100%;
  background: #ffffff;
  box-shadow: -5px 0px 10px rgba(0, 0, 0, 0.16);
  opacity: 1;
  z-index: 99;
  transition: all 1s;
  .list {
    position: absolute;
    width: 100px;
    top: 50%;
    transform: translateY(-50%);
    .li {
      margin-bottom: 40px;
      cursor: pointer;
      img {
        width: 40px;
        height: 40px;
        margin-left: 50%;
        transform: translateX(-50%);
      }
      p {
        width: 100px;
        color: #333333;
        text-align: center;
      }
    }
  }
} */
/* .dong {
  opacity: 0;
  right: -80px;
} */
/deep/.el-pagination.is-background .el-pager li:not(.disabled).active {
  background-color: #64b6a8;
}

.swiper {
  position: relative;
  display: inline-block;
  width: 800px;
  height: 260px;
  // overflow: hidden;
}

/deep/.swiper-button-prev,
.swiper-button-next {
  color: #64b6a8;
}

.t_1_1 {
  position: absolute !important;
  width: 130px;
  height: 58px;
  top: 30px;
  z-index: 999999;
  left: 120px;
  //top: 30px;
  //right: 20px;
}

.tit1 {
  width: 100%;
  height: 120px;
  background-color: #f2f2f2;

  .list {
    width: 1200px;
    margin-left: 50%;
    padding-top: 32px;
    transform: translateX(-50%);
    background-color: #f2f2f2;

    div {
      display: inline-block;
      vertical-align: middle;
      font-size: 20px;
      color: #333333;
      margin-right: 40px;
      cursor: pointer;
    }

    .li {
      font-size: 28px;
      color: #64b6a8;
      margin-right: 60px;

      img {
        /* width: 60px;
        height: 60px; */
      }

      span {
        vertical-align: middle;
      }
    }

    .sousuo {
      position: relative;
      display: inline-block;
      vertical-align: middle;
      width: 380px;
      height: 50px;
      background: #ffffff;
      border-radius: 4px;
      font-size: 18px;
      overflow: hidden;

      input {
        width: 300px;
        height: 55px;
        line-height: 55px;
        text-indent: 16px;
        font-size: 18px;
      }

      img {
        width: 25px;
        height: 25px;
        margin-left: 20px;
        cursor: pointer;
      }

      p {
        position: absolute;
        top: 0;
        right: 0;
        width: 80px;
        height: 55px;
        background-color: #64b6a8;
        text-align: center;
        line-height: 55px;
        font-size: 24px;
        cursor: pointer;
        color: #ffffff;
      }
    }

    .download {
      width: 200px;
      height: 50px;
      background-color: #64b6a8;
      border-radius: 6px;
      color: #fff;
      text-align: center;
      line-height: 50px;
    }

    .but {
      display: inline-block;
      width: 200px;
      height: 50px;
      background: #64b6a8;
      border-radius: 6px;
      text-align: center;
      line-height: 50px;
      color: #fff;
    }
  }
}

.moban {
  position: relative;
  width: 100%;
  max-width: 1200px;
  opacity: 1;
  // display: flex;
  padding-top: 20px;
  color: #333;
  width: 1200px;
  margin: 0 auto;
  display: flex;

  .moban-row {
    display: flex;
    margin-top: 16px;
    height: 28px;
    font-size: 20px;
    font-weight: 400;
    color: #333333;
    line-height: 28px;

    .moban-col {
      min-width: 275px;
      padding-right: 24px;
    }
  }

  .moban-flex {
    display: flex;
    justify-content: space-between;

    .moban-salary {
      height: 45px;
      font-size: 32px;
      font-weight: 800;
      color: #64b6a8;
      line-height: 45px;
    }
  }

  .moban-left {
    width: 793px;
    // height: 797px;
    border-radius: 8px 8px 8px 8px;
    opacity: 1;
    border: 1px solid #dcdcdc;
    padding: 20px 30px;
    box-sizing: border-box;
    display: inline-block;
    vertical-align: top;

    .moban-title {
      margin-top: 32px;

      height: 34px;
      font-size: 24px;
      font-weight: 500;
      color: #333333;
      line-height: 34px;
    }

    .maban-other {
      margin-top: 4px;
      height: 28px;
      font-size: 20px;
      font-weight: 400;
      color: #999999;
      line-height: 28px;

      img {
        width: 34px;
        height: 34px;
        vertical-align: middle;
      }

      span {
        margin-right: 22px;
        vertical-align: middle;
      }
    }

    .moban-tag-list {
      display: flex;
      flex-wrap: wrap;
      margin-top: 6px;

      .moban-tag {
        text-align: center;
        // width: 42px;
        padding: 0 3px;
        white-space: nowrap;
        height: 24px;
        line-height: 24px;
        border-radius: 2px 2px 2px 2px;
        opacity: 1;
        border: 1px solid #999999;
        font-size: 14px;
        font-weight: 400;
        color: #999999;
        margin-right: 10px;
      }
    }

    .moban-desc {
      margin-top: 6px;

      font-size: 20px;
      font-weight: 400;
      color: #333333;
      line-height: 24px;
      word-break: break-all;
    }

    .moban-title {
      display: flex;
      justify-content: space-between;

      .pointer {
        font-size: 20px;
        font-weight: 500;
        color: #64b6a8;
        line-height: 28px;

        .el-icon-arrow-right {
        }
      }
    }

    .moban-company {
      margin-top: 6px;
      height: 28px;
      font-size: 20px;
      font-weight: 400;
      color: #666666;
      line-height: 28px;
    }

    .moban-img-list {
      margin-top: 8px;
      display: flex;
      justify-content: space-between;
      flex-wrap: wrap;

      .moban-img {
        width: 356px;
        height: 166px;
        background: #d9d9d9;
        border-radius: 8px 8px 8px 8px;
        opacity: 1;
        overflow: hidden;
        object-fit: cover;
        margin-bottom: 12px;
      }
    }
  }

  .moban-right {
    padding-left: 20px;
    padding-top: 12px;
    // position: absolute;
    display: inline-block;

    // top: 0;
    .operate-list {
      width: 387px;
      display: flex;
      flex-wrap: wrap;
      text-align: center;

      .operate-item {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 96px;
        margin-bottom: 12px;
        cursor: pointer;

        &:nth-child(n + 3) {
          // margin-bottom: 26px;
        }

        img {
          max-width: 27px;
          max-height: 27px;
        }

        span {
          height: 28px;
          font-size: 18px;
          font-weight: 400;
          color: #333333;
          line-height: 28px;
        }
      }
    }

    .moban-user {
      width: 367px;
      border-radius: 8px 8px 8px 8px;
      opacity: 1;
      border: 1px solid #dcdcdc;
      position: relative;
      // overflow: hidden;
      padding: 30px 0 14px 18px;

      .moban-user-right-top {
        .moban-user-more {
          cursor: pointer;
          position: absolute;
          top: 0;
          right: 0;
          text-align: center;
          width: 110px;
          height: 30px;
          background: #64b6a8;
          border-radius: 0px 8px 0px 8px;
          opacity: 1;
          font-size: 16px;
          font-weight: 400;
          color: #ffffff;
          line-height: 30px;
        }

        .moban-user-info {
          margin-top: 4px;
          display: flex;

          .moban-user-info-left {
            margin-right: 26px;
            display: flex;
            flex-direction: column;
            align-items: center;
            width: 58px;

            .moban-user-info-img {
              width: 58px;
              height: 58px;
              background: #d9d9d9;
              border-radius: 50%;
              opacity: 1;
            }

            .moban-user-info-text {
              text-align: center;
              margin-top: -8px;
              width: 42px;
              height: 20px;
              background: #64b6a8;
              border-radius: 4px 4px 4px 4px;
              opacity: 1;
              font-size: 12px;
              font-weight: 400;
              color: #ffffff;
              line-height: 20px;
            }
          }

          .moban-user-info-right {
            .user-info-right-top {
              user-select: none;
              cursor: pointer;
              display: flex;
              align-items: center;
              height: 34px;
              max-width: 86px;
              font-size: 24px;
              font-weight: 500;
              color: #333333;
              line-height: 34px;
              max-width: 286px;

              span:not(:first-child) {
                padding: 0 3px;
                margin-left: 12px;
                flex-shrink: 0;
                white-space: nowrap;
                font-size: 16px;
                height: 24px;
                line-height: 24px;
              }
            }

            .user-info-right-bottom {
              cursor: pointer;
              margin-top: 8px;
              width: 276px;
              max-height: 56px;
              font-size: 20px;
              font-weight: 400;
              color: #666666;
              line-height: 28px;
            }
          }
        }

        .moban-user-operation {
          margin-top: 24px;
          display: flex;
          // justify-content: space-between;
          justify-content: center;
          line-height: 40px;
          font-size: 20px;
          font-weight: 400;
          padding-right: 6px;

          div {
            margin-right: 6px;
          }

          .moban-user-resume-btn {
            flex-shrink: 0;

            text-align: center;
            // margin-right: 14px;
            width: 100px;
            height: 40px;
            border-radius: 4px 4px 4px 4px;
            opacity: 1;
            border: 1px solid #64b6a8;
            color: #64b6a8;
            cursor: pointer;
          }

          .moban-user-chat-online {
            cursor: pointer;
            flex-shrink: 0;
            width: 112px;
            height: 40px;
            background: #64b6a8;
            border-radius: 6px 6px 6px 6px;
            opacity: 1;
            display: flex;
            align-items: center;
            justify-content: center;
            // margin-right: 14px;
            color: #fff;

            font-size: 16px;

            img {
              width: 30px;
              height: 30px;
              margin-right: 2px;
            }
          }

          .moban-user-call {
            cursor: pointer;
            flex-shrink: 0;
            margin-right: 0px;
            // width: 112px;
            padding: 0 6px;
            height: 40px;
            border: 1px solid #64b6a8;
            border-radius: 6px 6px 6px 6px;

            color: #64b6a8;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 16px;

            img {
              width: 30px;
              height: 30px;
              margin-right: 2px;
            }
          }
        }
      }
    }

    .miniprogram {
      margin-top: 12px;
      width: 387px;
      text-align: center;

      img {
        width: 230px;
        height: 230px;
        opacity: 1;
      }

      div {
        margin-top: 12px;
        height: 28px;
        font-size: 20px;
        font-weight: 400;
        color: #333333;
        line-height: 28px;
      }
    }
  }
}
</style>
